

:global {
    @keyframes loading-micro-spin {
        from {transform: rotate(0deg);}
          to {transform: rotate(360deg);}
    }

    .cpaas-normal-content-container, .page-container {
        &.loading-micro {
            &::before {
                content: "";
                text-align: center;
                width: 3px;
                height: 3px;
                margin: 14.5px 0 0 14.5px;
                border-radius: 100%;
                box-shadow: 0 -10px 0 1px #333, /* 上, 1px 扩展 */ 10px 0px #333, /* 右 */ 0 10px #333, /* 下 */ -10px 0 #333, /* 左 */ -7px -7px 0 0.5px #333, /* 左上, 0.5px扩展 */ 7px -7px 0 1.5px #333, /* 右上, 1.5px扩展 */ 7px 7px #333, /* 右下 */ -7px 7px #333;
                position: absolute;
                top: 0;
                left: 50%;
                z-index: 11;
                transform: translateX(-50%) rotate(360deg);
                animation: loading-micro-spin 1s linear infinite;
            }
            &::after {
                content: "";
                text-align: center;
                line-height: 48px;
                display: block;
                width: 100%;
                height: 100%;
                position: absolute;
                background-color: #fff;
                top: 0;
                left: 0;
                z-index: 10;
            }
        }
    }
}
